<template>
  <div class="app-main">
    <div class="section-main">
      <img src="../../../assets/img/ertong/airport.png" alt="" class="img-feiji">
        <div class="upload-div clearfix">
          <div class="upload-input">
            <btn-upload @getuploadimg="setuploadimg"
              color='#86c9c7'
              size='15'
            ></btn-upload>
          </div>
          <div class="img-cloud">
            <div class="img-upload">
                  <img :src="cutimg" v-if="hasimg" class="cutimg">
            </div>
          </div>
        </div>
        <div class="text-div">
            <p class="content">
                <textarea name="" id="" rows="5" v-model="content"></textarea>
                <span class="max-content">{{contentlength}}/{{maxlength}}</span>
            </p>
            <p  class="word">
              <span @click="getLuckWord">随机祝福语</span>
            </p>
            </div>
    </div>
      <div class="section-bottom">
          <img src="../../../assets/img/ertong/bottom2.png" alt="" class="img-fenche">
          <div class="show-div" @click="goshow">
            <btn-router
              :background='require("../../../assets/img/ertong/btn1.png")'
              color='#80c5c3'
              right='-0.3rem'
              top="0.2rem"
              :width=295
              :height=102
              size='16'
            >预览贺卡</btn-router>
          </div>
          <div class="back-div" @click="goback" >
            <btn-router
              :background='require("../../../assets/img/ertong/btn1.png")'
              right='-0.3rem'
              top="0.2rem"
              color='#80c5c3'
              :width=295
              :height=102
              size='16'
            >重新选择</btn-router>
          </div>
    </div>
    <div class="popup" v-show="panel">
      <my-cropper wh='1' :imgurl="imgurl" @getcutimg="setcutimg"></my-cropper>
    </div>
  </div>
</template>

<script>
import btnUpload from '@/components/upload'// 上传图片btn
import btnRouter from '@/components/routerButton'// 跳转按钮组件
import myCropper from '@/components/cropper'// 裁剪组件
import luckWord from '../../../assets/utils/luck.js'// 祝福语
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 裁剪弹出层相关数据
      panel: false,
      imgurl: '',

      // 输入相关数据
      hasimg: false,
      cutimg: '',
      content: '',
      contentlength: 0,
      maxlength: 70,
      cid: ''
    }
  },
  watch: {
    content (newVal, oldVal) {
      this.contentlength = newVal.length
      if (this.contentlength > this.maxlength) {
        this.content = oldVal
      }
    }
  },
  components: {
    btnUpload,
    btnRouter,
    myCropper
  },
  methods: {
    inputblur () {
      document.querySelector('.section-bottom').style.position = 'fixed'
    },
    inputfocus () {
      document.querySelector('.section-bottom').style.position = 'relative'
    },
    setCss () {
      var originalHeight = document.documentElement.clientHeight || document.body.clientHeight
      document.querySelector('.container').style.height = originalHeight.toString() + 'px'
      window.onresize = function () {
        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
        if (resizeHeight * 1 < originalHeight * 1) {
          document.querySelector('.section-bottom').style.position = 'relative'
        } else {
          document.querySelector('.section-bottom').style.position = 'fixed'
          document.querySelector('.section-my').style.display = 'block'
          document.querySelector('.section-do').style.display = 'block'
        }
      }
    },
    goback () {
      this.$router.go(-1)
    },
    goshow () {
      this.$store.dispatch('savePreview', { imgurl: this.cutimg, content: this.content, contentId: 1 })
      this.$router.push('/show/ertong')
    },
    getLuckWord (e, type = 'jiandang') {
      var index = Math.ceil(Math.random() * 100)
      var maxLength = luckWord[type].length
      index = index % maxLength
      this.content = luckWord[type][index]['luck']
    },
    setuploadimg (imgInfo) {
      this.panel = imgInfo.panel
      this.imgurl = imgInfo.imgurl
    },
    setcutimg (cutimgInfo) {
      this.panel = false
      this.cutimg = cutimgInfo.cutimg
      this.hasimg = cutimgInfo.hasimg
    }
  },
  mounted () {
    this.getLuckWord()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-main{overflow: hidden;background:#fdede9;}
  .section-main{position:relative;top:0.5rem;width:6.7rem;margin:0 auto;padding:0.5rem 0;min-height:10rem;background-color:transparent;box-sizing:border-box;border-radius:20px}
  .section-main div{position: relative;z-index: 2;}
  .img-upload{opacity: 0.7;left:10%;top:10%;float: left;width: 80%;height:80%;position: relative; border-radius: 10px;box-shadow: 5px -5px 20px #ebddd1;color: #bb010e;}
  .img-cloud{background: url(../../../assets/img/ertong/photo2.png) no-repeat top left;background-size:contain;margin-bottom:0.3rem ;left: 1rem;float:left;width:3rem;height:3rem;}
  .upload-input{float:left;position:relative;top:1.2rem;margin-left:0.1rem;left:0.4rem}
  .section-bottom{position:absolute;bottom:0;width:100%}
  .section-bottom img{position:absolute;bottom:0;width:100%;right:0;}
  .show-div{display:inline-block;position:relative;bottom:.2rem;left:0.5rem}
  .back-div{display:block;position:relative;bottom:.2rem;right:0.5rem;float:right}
  .popup {
    z-index: 99;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,1);
}

.cutimg{width: 90%;margin: 5%}
.text-div{background: url(../../../assets/img/ertong/cloud.png) no-repeat center center;background-size:100% 100%;margin:0.3rem 0;width:100%;min-height:4.5rem;}
.text-div .content{position: relative;width: 70%;margin: 0 auto;top:1.2rem}
.text-div textarea{width: 100%;border: none;font-size:12px;line-height: 1.25em;background: transparent}
.max-content{
  display: block;
  position: absolute;
  right:0;
  bottom:0;
  font-size:12px
}
.word{
    z-index: 20;
    position: relative;
    top: 1.4rem;
    left: 28%;
  }
  .word span{
    background: #80c5c3;
    padding:3px 5px;
    color: #fff;
    font-size: 12px;
  }
  .img-feiji{position: absolute;width: 2.41rem;height:2.19rem;right:-1rem}

</style>
